import QtQuick 2.0
import QtQuick.Controls 2.5

Rectangle {
    id:root

    border.width: 5
    border.color: "grey"
    radius:10
    color: Qt.rgba(0, 0, 0, 0) // 设置颜色为完全透明
    z:100

    // 开始游戏发出的信号
    signal startGame(var practicType);
    // 点击“开始练习”按钮后发出的信号
    signal startBtnClicked();


    // practiceType 用于存储练习的类型；0 表示“简单”；1 表示“一般”；2 表示“困难”
    property int practiceType: 0

    // 用于选择练习模式的 Rectangl
    Rectangle{
        x:25
        width:root.width - 50
        height: 100
        color: Qt.rgba(0, 0, 0, 0)

        anchors.top: root.top
        anchors.topMargin: 20

        Text{
            id:headText
            text: "练习模式"
            color: "orange"
            font.bold: true
            font.family:"STXinwei"  // 华文新魏字体
            font.pixelSize: 32

            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.horizontalCenter: parent.horizontalCenter
        }

        ComboBox{
            width:parent.width
            model: ["简单","一般","困难"]
            currentIndex: 0

            anchors.top: headText.bottom
            anchors.topMargin: 10

            onCurrentIndexChanged: {
                practiceType = currentIndex
                console.log(practiceType)
            }
        }
    }


/*
    Rectangle{
        x:25
        width:root.width - 50
        height: 100
        color: Qt.rgba(0, 0, 0, 0)

        anchors.top: root.top
        anchors.topMargin: 20

        Text{
            id:headText
            text: "打字练习"
            color: "orange"
            font.bold: true
            font.family:"STXinwei"  // 华文新魏字体
            font.pixelSize: 32

            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
*/

    ListModel{  // 创建一个 ListModel
        id:btnInfoModel
        ListElement{ name : "startBtn" ; btnContent : "开始练习" }
//        ListElement{ name : "recordBtn" ; btnContent : "查看战绩" }
        ListElement{ name : "quitBtn" ; btnContent : "退出练习" }
    }

    // 动态创建 按钮
    Column{
        spacing: 15
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 25

        Repeater{
            model:btnInfoModel

            delegate:delegateRect
        }
    }

    Component{
        id:delegateRect

        // 这是一个按钮
        Rectangle{
            id:parentRect
            x:25
            width:root.width - 50
            height: 50
            radius: 20
            color: "lightBlue"

            objectName: btnInfoModel.get(index).name


            Text{
                id:aText
                text: btnInfoModel.get(index).btnContent
                font.pixelSize: 28
                font.family:"STXinwei"  // 华文新魏字体
                anchors.centerIn: parent
            }



            MouseArea{
                id:mouseArea
                anchors.fill: parent
                // 该属性设置为false的话，则鼠标的进入 离开 移动不能捕获到
                hoverEnabled: true

                onClicked: {
                    function onClickSlot(){
                        var name = parentRect.objectName
                        if("startBtn" === name){
                            console.log("startBtn")
                            startBoxLeftAnim.running = true

                        }else if("recordBtn" === name){
                            console.log("recordBtn")
                        }else {
                            Qt.quit();
                        }
                    }
                    onClickSlot()
                }

                // 当鼠标滑入时，让被滑入的 StartBoxBtn 有不同的样式
                onEntered:{

                    parentRect.width += 10
                    parentRect.x -= 5
                    parentRect.height += 10
                    parentRect.y += 5
                    parentRect.color = Qt.rgba(0, 191, 255, 1)

                    aText.font.pixelSize += 5

                }

                // 当鼠标离开时，让被离开的 StartBoxBtn 恢复以前的样式
                onExited: {

                    parentRect.width -= 10
                    parentRect.x += 5
                    parentRect.height -= 10
                    parentRect.y -= 5
                    parentRect.color = "lightBlue"

                    aText.font.pixelSize -= 5
                }
            }


        }

    }

    // 点击开始按钮后出现的动画
    SequentialAnimation {
        id:startBoxLeftAnim

        NumberAnimation{
            target: root
            property: "y"
            to:root.y - 10
            duration: 200
        }

        ParallelAnimation{
            NumberAnimation{
                target:root
                property: "y"
                to:root.y + 250
                duration:500
            }
            NumberAnimation{
                target: root
                property:"scale"
                to:0
                duration: 500
            }
        }


        loops:1

        onStopped:{
            startGame(practiceType);
            this.destroy();
        }

    }

}
